
<template>
  <div class="common-layout">
    <el-container>
      <el-header class="h-100px w-1200px mx-auto">
        <div class="flex text-dark-500">
            <div class="self-center"><el-image class="w-120px h-60px mt-14px" src="/images/login-ico.png" /></div>
            <div class="self-center text-24px ml-10px mr-30px">智社考</div>
            <div class="self-center text-16px">欢迎登录!</div>
        </div>
        
      </el-header>
      <el-main class="mainBg h-700px">
        <div class="w-1200px h-480px mt-124px mx-auto loginArea">
            <div class="w-312px mx-auto ">
                <div class="flex justify-between text-16px text-center pt-66px">
                    <div class="w-152px linkText" :class="{'text-red-500 font-weight-500':currentTab==0, 'text-gray-500':currentTab!=0}" @click="toggleTab(0)">个人用户登录</div>
                    <div class="text-gray-300">|</div>
                    <div class="w-152px linkText" :class="{'text-red-500 font-weight-500':currentTab==1, 'text-gray-500':currentTab!=1}"  @click="toggleTab(1)">集团用户登录</div>
                </div>
                <div class="mx-10px mt-42px">
                    <div class="">
                        <el-input v-model="userCount.account" class="w-292px" size="large" placeholder="请输入手机号">
                            <template #prefix>
                                <el-icon class="el-input__icon" size="20"><user /></el-icon>
                            </template>
                        </el-input>
                    </div>
                    <div class="mt-20px">
                        <el-input v-model="userCount.password" type="password" class="w-292px" size="large" placeholder="请输入密码">
                            <template #prefix>
                                <el-icon class="el-input__icon" size="20"><lock /></el-icon>
                            </template>
                        </el-input>
                    </div>
                    <div class="mt-10px flex justify-between text-14px text-gray-500">
                        <div class="self-center">
                            <el-checkbox v-model="rememberPwd" label="记住密码" size="large" />
                        </div>
                        <div class="self-center linkText" @click="dialogForgetPwd = true" v-if="!currentTab">
                            忘记密码？
                        </div>
                    </div>
                    <div class="mt-20px">
                        <el-button type="primary" class="w-292px" @click="doLogin()">立即登录</el-button>
                    </div>
                    <div class="mt-20px text-center">
                        <span class="text-blue-500 text-14px linkText" @click="showDialogRegister">没有账号？立即注册</span>
                    </div>
                    <div class="mt-20px">
                        <el-divider>
                            其他登录方式
                        </el-divider>
                    </div>
                    <div class="mt-20px" v-if="!currentTab">
                        <el-button type="success" class="w-292px" icon="ChatDotRound" plain @click="wechatMessage()">微信扫码登录</el-button>
                    </div>
                </div>
            </div>
            
        </div>
      </el-main>
      <el-footer class="text-center text-14px text-dark-500">浙江嘉兴康宁微信息科技有限公司 版权所有</el-footer>
    </el-container>
  </div>
  <el-dialog v-model="dialogRegister" title="注册用户" align-center width="600">
    <div class="p-10px text-gray-300">
        <div class="">
            <el-input v-model="regForm.mobile" placeholder="请输入手机号码">
                <template #prepend>手机号码</template>
            </el-input>
        </div>
        <!-- <div class="flex mt-10px">
            <div>
                <el-input v-model="regForm.code" placeholder="短信验证码">
                    <template #prepend>短信验证</template>
                </el-input>
            </div>
            <div class="ml-10px">
                <el-button :disabled="regCodeBtnDisabled" @click="getCode(1)">{{ getCodeText }}</el-button>
            </div>
        </div> -->
        <div class="flex mt-10px">
            <div >
                <el-input v-model="regForm.captcha"  placeholder="验证码">
                    <template #prepend>验证码　</template>
                </el-input>
            </div>
            <div class="ml-10px">
                <CaptchaComponent ref="captchaRef"></CaptchaComponent>
            </div>
        </div>
        <div class="flex mt-10px">
            <div class="self-center">
                <el-input v-model="regForm.password" type="password" placeholder="请输入登录密码">
                    <template #prepend>登录密码</template>
                </el-input>
            </div>
            <div class="ml-20px self-center">
                请务必认真填写
            </div>
        </div>
        <div class="flex mt-10px">
            <div class="self-center">
                <el-input v-model="regForm.repassword" type="password" placeholder="请输入确认密码">
                    <template #prepend>确认密码</template>
                </el-input>
            </div>
            <div class="ml-20px self-center">
                请务必认真填写
            </div>
        </div>
        <div class="flex mt-10px justify-left items-center">
            <div class="self-center text-dark-500 mr-10rpx">
                报考级别
            </div>
            <div class="ml-20px self-center">
                <el-radio-group v-model="regForm.grade">
                    <el-radio :value="1">初级社工</el-radio>
                    <el-radio :value="2">中级社工</el-radio>
                    <el-radio :value="23">高级社工</el-radio>
                </el-radio-group>
            </div>
            
        </div>

        <div class="flex mt-20px mb-20px">
            <el-button type="primary" class="w-full" @click="doRegister()">立即提交</el-button>
        </div>
        
    </div>
  </el-dialog>
  <el-dialog v-model="dialogForgetPwd" title="忘记密码" align-center width="600">
    <div class="p-10px text-gray-300">
        <div class="">
            <el-input v-model="input1" placeholder="请输入手机号码">
                <template #prepend>手机号码</template>
            </el-input>
        </div>
        <div class="flex mt-10px">
            <div>
                <el-input v-model="input1" placeholder="短信验证码">
                    <template #prepend>短信验证</template>
                </el-input>
            </div>
            <div class="ml-10px">
                <el-button>{{ getCodeText }}</el-button>
            </div>
        </div>
        <div class="flex mt-10px">
            <div class="self-center">
                <el-input v-model="input1" placeholder="请输入登录密码">
                    <template #prepend>登录密码</template>
                </el-input>
            </div>
            <div class="ml-20px self-center">
                请务必认真填写
            </div>
        </div>
        <div class="flex mt-10px">
            <div class="self-center">
                <el-input v-model="input1" placeholder="请输入确认密码">
                    <template #prepend>确认密码</template>
                </el-input>
            </div>
            <div class="ml-20px self-center">
                请务必认真填写
            </div>
        </div>

        <div class="flex mt-20px mb-20px">
            <el-button type="primary" class="w-full">立即提交</el-button>
        </div>
        
    </div>
  </el-dialog>
</template>

<script setup>
    import { useUserStore } from '../../../stores/user'
    import { systemApi,userApi } from '../../../api/api'
    import { ElMessage } from 'element-plus'
    import { onMounted,ref } from 'vue'
    import CaptchaComponent from '../../../components/CaptchaComponent.vue'

    const dialogForgetPwd = ref(false)
    const dialogRegister = ref(false)
    const regCodeBtnDisabled = ref(false)
    const forgetCodeBtnDisabled = ref(false)
    const currentTab = ref(0)
    const rememberPwd = ref(0)
    const userCount = ref({})
    const userInfo = useUserStore()
    const getCodeText = ref('获取验证码')
    const captchaRef = ref(null)
    const regForm = ref({
        mobile:"",
        captcha:"",
        grade:1,
        password:"",
        repassword:""
    })
    
    const config = async()=>{
        const res = await systemApi.getConfig()
        console.log(res)
    }

    const wechatMessage = ()=>{
        ElMessage({
            message: '功能升级中，请稍后再试',
            type: 'warning',
        })
    } 

    onMounted(()=>{
        config()
        userCount.value = {
            account:userInfo.getPhone(),
            password:userInfo.getPassword()
        
        }
        if(userInfo.getPhone()){
            rememberPwd.value = true
        }
    })

    const toggleTab = (index)=>{
        currentTab.value = index
    }

    async function getCode(type){
        if(type == 1){
            if(!regForm.value.mobile){
                ElMessage({
                    message: '请输入手机号码',
                    type: 'warning',
                })
                return
            }

            const res = await userApi.userIsExist({mobile:regForm.value.mobile})
            if(!res.code){
                ElMessage({
                    message: res.msg,
                    type: 'warning',
                })
                return
            }else{
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            }

            regCodeBtnDisabled.value = true
            let time = 10
            this.getCodeText = time + 's后重试'
            let daojishi = setInterval(()=>{
                time--
                this.getCodeText = time + 's后重试'
                if(time == 0){
                    clearInterval(daojishi)
                    this.getCodeText = '获取验证码'
                    this.regCodeBtnDisabled = false
                }
            },1000)




        }else{
            forgetCodeBtnDisabled.value = true
        }
    }

    



    async function doRegister(){
        
        const regMobile = /^1[3456789]\d{9}$/
        if(!regMobile.test(regForm.value.mobile)){
            ElMessage({
                message: '请输入正确的手机号码',
                type: 'warning',
            })
            return
        }
        // if(!regForm.value.code){
        //     ElMessage({
        //         message: '请输入验证码',
        //         type: 'warning',
        //     })
        //     return
        // }
        if(!regForm.value.captcha){
            ElMessage({
                message: '请输入验证码',
                type: 'warning',
            })
            return
        }
        if(captchaRef.value.correctCode.toLowerCase() != regForm.value.captcha.toLowerCase()){
            ElMessage({
                message: '验证码有误',
                type: 'warning',
            })
            return
        }
        if(!regForm.value.password){
            ElMessage({
                message: '请输入密码',
                type: 'warning',
            })
            return
        }
        if(regForm.value.password.length < 6){
            ElMessage({
                message: '密码不能少于6位',
                type: 'warning',
            })
            return
        }
        if(regForm.value.password != regForm.value.repassword){
            ElMessage({
                message: '两次密码不一致',
                type: 'warning',
            })
            return
        }
        // regForm.value.captchaId = captchaId.value
        const res = await userApi.userRegister(regForm.value)
        if(res.code){
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            dialogRegister.value = false
            
        }else{
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
        
    }
    // 初始化获取验证码
    
    
    function showDialogRegister(){
        dialogRegister.value = true

    }

    async function doLogin(){
        console.log("记住密码开关",rememberPwd.value)
        const res = await userApi.doLogin(userCount.value)
        if(res.code){
            userInfo.setUserInfo(res.data.user_info)
            userInfo.setToken(res.data.token)
            if(rememberPwd.value){
                userInfo.setPhone(userCount.value.account)
                userInfo.setPassword(userCount.value.password)
            }else{
                userInfo.setPhone('')
                userInfo.setPassword('')
            }
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            setTimeout(()=>{
                window.location.href = '/'
            },1000)
        }else{
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        
        }
        console.log(res)
    }


</script>
<style>
    .mainBg{
        background:url("/public/images/login-bg.png") no-repeat center -80px;
    }
    .loginArea{
        background:url("/public/images/login.png") no-repeat center 0;
    }
    .linkText{
        cursor: pointer;
    }
</style>